<template>
  <div class="recover-container">
    <div class="recover-content">
      <van-nav-bar
        left-text="上门回收预约"
        left-arrow
        :right-text="curPosition ? curPosition : '按钮'"
        @click-left="this.$router.push('/home')"
      ></van-nav-bar>
      <div class="head-box">
        <div class="pic">
          <img src="../../assets/image/logo.jpg" alt="" />
        </div>
        <span>韶关废品智慧回收平台</span>
        <van-icon name="location-o" color="#55c24d" class="location" @click="getPosition" />
      </div>
      <div class="body-price">
        <van-swipe class="price-swipe" :autoplay="6000" indicator-color="white">
          <van-swipe-item v-for="item in pricelist" :key="item.id">
            <span>{{ item.name }}</span>
            <span>{{ item.price }} 元 / 公斤</span>
            <span>{{ item.remark }}</span>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 次日上门 准时到达 -->
      <div class="select-arrive">
        <div class="tip-title">
          <van-icon name="add-o" />
          <span>即 日 上 门 准 时 到 达</span>
          <van-icon name="add-o" />
        </div>
        <!-- 品类多选 -->
        <div class="variety">
          <p class="varity-title">品类多选</p>
          <van-checkbox-group v-model="this.orderForm.wasteid" class="variety-selected">
            <van-checkbox name="废纸">废纸</van-checkbox>
            <van-checkbox name="塑料">塑料</van-checkbox>
            <van-checkbox name="金属">金属</van-checkbox>
            <van-checkbox name="家电">家电</van-checkbox>
          </van-checkbox-group>
        </div>
        <!-- 预约时间 -->
        <div class="appoint-time">
          <p class="appoint-title">预约时间</p>
          <p class="default" @click="showTime = true">
            {{
              this.orderForm.selectedTime
                ? this.orderForm.selectedTime
                : '在今日进行回收，点击选择时间段'
            }}<van-icon name="arrow" />
          </p>
        </div>
        <!-- 电话号码 -->
        <div class="phone">
          <p class="phone-title">手机号码</p>
          <input
            type="text"
            v-model="this.orderForm.phone"
            :placeholder="this.orderForm.phone ? this.orderForm.phone : '个人电话'"
          />
        </div>
        <!-- 时间的弹出层 -->
        <van-popup v-model:show="showTime" round position="bottom">
          <van-picker :columns="timelist" @cancel="showTime = false" @confirm="onTimeConfirm" />
        </van-popup>

        <!-- 地址 -->
        <div class="address">
          <p class="address-title">地址选择</p>
          <van-field
            v-model="this.orderForm.addres"
            is-link
            readonly
            label=""
            placeholder="请选择所在地区"
            @click="selectAddress"
          />
        </div>

        <van-button type="danger" class="submit-btn" @click="submitMsg">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant'
import { getTodayPrice } from '../../api/historyPrice.js'
import { createOrder } from '../../api/user.js'
import { getCurPosition } from '../../api/position.js'
export default {
  name: 'MyRecover',
  data() {
    return {
      // 定位
      curPosition: '正在定位...',
      // 显示弹出层
      showTime: false,
      // 时间列表
      timelist: [
        { text: '0：00', value: '0' },
        { text: '1：00', value: '1' },
        { text: '2：00', value: '2' },
        { text: '3：00', value: '3' },
        { text: '4：00', value: '4' },
        { text: '5：00', value: '5' },
        { text: '6：00', value: '6' },
        { text: '7：00', value: '7' },
        { text: '8：00', value: '8' },
        { text: '9：00', value: '9' },
        { text: '10：00', value: '10' },
        { text: '11：00', value: '11' },
        { text: '12：00', value: '12' },
        { text: '13：00', value: '13' },
        { text: '14：00', value: '14' },
        { text: '15：00', value: '15' },
        { text: '16：00', value: '16' },
        { text: '17：00', value: '17' },
        { text: '18：00', value: '18' },
        { text: '19：00', value: '19' },
        { text: '20：00', value: '20' },
        { text: '21：00', value: '21' }
      ],
      // 选择地区
      AddressValue: '',
      // 表单
      orderForm: {
        wasteid: [],
        phone: JSON.parse(window.sessionStorage.getItem('userInfo')).phone,
        addres: '',
        selectedTime: ''
      },
      // 路由传递过来的参数
      params: {},
      // 最新价格列表
      pricelist: []
    }
  },
  created() {
    this.getPrice()
    const date = new Date()
    this.timelist = this.timelist.slice(date.getHours() + 1)
    this.getPosition()
  },
  activated() {
    if (this.$route.params.address) {
      this.orderForm.addres = this.$route.params.address
    }
  },
  methods: {
    getPosition() {
      setTimeout(() => {
        getCurPosition().then((city) => {
          this.curPosition = city
        })
      }, 2000)
    },
    // 选择时间
    onTimeConfirm({ selectedOptions }) {
      this.orderForm.selectedTime = selectedOptions[0].text
      this.showTime = false
    },
    // 选择地址
    selectAddress() {
      window.sessionStorage.setItem('orderInfo', JSON.stringify(this.orderForm))
      this.$router.push('/address')
    },
    // 获取最新价格
    async getPrice() {
      const { data: res } = await getTodayPrice()
      if (res.code === 1) {
        this.pricelist = res.data
      } else {
        showToast('获取数据失败！')
      }
    },
    // 提交按钮
    async submitMsg() {
      this.orderForm.wasteid = this.orderForm.wasteid.join('，')
      // 提交订单
      const { data: res } = await createOrder(this.orderForm)
      if (res.code === 1) {
        showToast(res.data)
        this.orderForm = {
          wasteid: [],
          addres: '',
          selectedTime: ''
        }
        this.$router.push('/home')
      } else {
        showToast(res.msg)
        window.location.reload()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.recover-container {
  height: 100vh;
  background-color: #f3f3f3;
  .recover-content {
    .van-nav-bar {
      background-color: #55c24d;
      :deep(.van-nav-bar__text) {
        font-size: 16px;
        color: #fff;
      }

      :deep(.van-icon) {
        color: #fff;
      }
    }

    // 标题
    .head-box {
      position: relative;
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 20px 0 20px 20px;
      background-color: #fff;

      .pic {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #55c24d;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      span {
        margin-left: 10px;
        font-family: serif;
        font-size: 18px;
      }

      .location {
        position: absolute;
        right: 10px;
        top: 34%;
        font-size: 26px;
        color: #333 !important;
        z-index: 99;
      }
    }

    // 价格
    .body-price {
      width: 96%;
      margin: 15px auto;
      padding-left: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.2);

      .price-swipe {
        border-radius: 10px;
        .van-swipe-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 90%;

          span {
            margin: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-family: serif;
          }
        }
      }
    }
  }

  .select-arrive {
    width: 100%;
    height: 500px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #f3f3f3;

    // 即日上门
    .tip-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0;
      color: #55c24d;
      font-weight: 700;

      span {
        margin: 0 5px;
      }
    }

    // 品类多选
    .variety {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;

      .varity-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        margin: 0;
        box-sizing: border-box;
        color: #fff;
        background-color: #55c24d;
      }

      .variety-selected {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-left: 5px;

        .van-checkbox {
          width: 45%;
          margin: 12px 0;
        }
      }
    }

    // 预约时间
    .appoint-time {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 10px;

      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
        margin: 0;
      }

      .appoint-title {
        color: #fff;
        background-color: #55c24d;
      }

      .default {
        margin: 0;
        color: #333;
        font-size: 14px;
        background-color: #fff;

        .van-icon {
          margin-left: 5px;
        }
      }
    }

    // 电话号码
    .phone {
      background-color: #fff;
      margin: 10px 0;
      border-radius: 8px;
      overflow: hidden;

      .phone-title {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        margin: 0;
        color: #fff;
        background-color: #55c24d;
      }

      input {
        width: 100%;
        height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
        border: 0;
      }
    }

    // 地址
    .address {
      height: 84px;
      border-radius: 8px;
      overflow: hidden;

      .address-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        margin: 0;
        box-sizing: border-box;
        color: #fff;
        background-color: #55c24d;
      }

      .van-field {
        border: 1px solid #666;
        border: 0;
      }
    }

    .submit-btn {
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      margin: 16px auto;
      border-radius: 15px;
    }
  }
}

.gold {
  color: #eef519;
  font-weight: 700;
}
</style>
